import { defineStore } from 'pinia';
import LanguageConfig from 'src/models/LanguageConfig';
import ComplimentConfig from 'src/models/ComplimentConfig';
import Playlist from 'src/models/Playlist';
import Audio from 'src/models/Audio';
import Video from 'src/models/Video';
import { LocalStorage, QuasarLanguage } from 'quasar';
import { plainToInstance } from 'class-transformer';
import { setI18nLanguage } from 'boot/i18n';
import { Quasar } from 'quasar';
const quasarLangList = import.meta.glob('/node_modules/quasar/lang/*.mjs');
export interface GlobalStateInterface {
  languageConfig: LanguageConfig[];
  complimentConfig: ComplimentConfig[];
  systemLanguage: LanguageConfig[];
  uiLanguage: string;
  isLoading: boolean;
  showUploader: boolean;
  showSigninDialog: boolean;
  showSignupDialog: boolean;
  showSettingDialog: boolean;
  showMyConnections: boolean;
  showMyLibrary: boolean;
  showMyContent: boolean;
  showAnalytics: boolean;
  currentSettingPage: string;
  showRightDrawer: boolean;
  rightDrawerColor?: string;
  rightDrawerContent: Video | Audio | Playlist | undefined;
  enableSingular: boolean;
}
export const useGlobalStore = defineStore('global', {
  state: (): GlobalStateInterface => ({
    languageConfig: [],
    uiLanguage: 'en',
    complimentConfig: [],
    systemLanguage: [],
    isLoading: false,
    showUploader: false,
    showSigninDialog: false,
    showSignupDialog: false,
    showSettingDialog: false,
    showMyConnections: true,
    showMyContent: true,
    showMyLibrary: true,
    showAnalytics: false,
    currentSettingPage: 'account',
    showRightDrawer: false,
    rightDrawerContent: undefined,
    enableSingular: true,
  }),
  getters: {},
  actions: {
    updateSingular(value: boolean) {
      this.enableSingular = value;
    },
    setLanguageConfig(config: LanguageConfig[]) {
      this.languageConfig = config;
    },
    initUILanguage() {
      const langCode = LocalStorage.getItem<string>('uiLanguage');
      console.log(langCode);
      if (langCode) {
        this.uiLanguage = langCode;
        setI18nLanguage(langCode);
      }
    },
    async setUILanguage(code: string) {
      this.uiLanguage = code;
      LocalStorage.set('uiLanguage', code);
      setI18nLanguage(code);
      try {
        const quasarLang = await quasarLangList[
          `/node_modules/quasar/lang/${code}.mjs`
        ]();
        console.log(quasarLang);
        Quasar.lang.set(quasarLang as QuasarLanguage);
      } catch (err) {
        // continue
        console.log(err);
      }
    },
    setComplimentConfig(config: ComplimentConfig[]) {
      this.complimentConfig = config;
    },
    setLoading(isLoading: boolean) {
      this.isLoading = isLoading;
    },
    setSettingPage(value: string) {
      this.currentSettingPage = value;
    },
    setShowRightDrawer(value: boolean) {
      this.showRightDrawer = value;
    },
    setMyContentsRightDrawer(value: Video | Audio | Playlist) {
      if (!this.showRightDrawer) {
        this.showRightDrawer = true;
      }
      this.rightDrawerContent = value;
    },
    setRightDrawerColor(color: string) {
      this.rightDrawerColor = color;
    },
    async getLanguageConfig(systemLanguage: string | undefined) {
      const config = (await (
        await fetch('/data/language-config.json')
      ).json()) as Array<any>;
      if (config) {
        if (config.length > 0) {
          const result = plainToInstance(LanguageConfig, config);
          this.languageConfig = result;
        }
      }
      if (LocalStorage.has('uiLanguage')) {
        const uiLanguage = LocalStorage.getItem('uiLanguage') as string;
        this.uiLanguage = uiLanguage;
      } else {
        if (systemLanguage) {
          this.uiLanguage = systemLanguage;
        }
      }
    },
    async getComplimentConfig() {
      const config = (await (
        await fetch('/data/compliments-config.json')
      ).json()) as Array<any>;
      if (config) {
        if (config.length > 0) {
          const result = plainToInstance(ComplimentConfig, config);
          this.complimentConfig = result;
        }
      }
    },
  },
});
